<template>
  <div class="serve">
       <div class="header-warpper">
         <span style="padding-left:0" @click="$router.back(-1)">
          <img src="../../assets/l_jt.png" alt="">
          <span>客服问答</span> 
         </span>
         <router-link to="wrecord">问答记录</router-link>
       </div>
       <div class="logo">
         <img src="" alt="">
       </div>
       <div class="m-label">请选择问题工单分类</div>
       <div class="m-input-box" @click="showAliasPicker">
         <input class="m-input" type="text" placeholder="请选择问题工单分类" maxlength="40" v-model="fenlei">
         <input class="m-input" type="number" v-model="feileiid" style="display:none" value="">
         <img src="../../assets/r_jt.png" alt="">
       </div>
       <div class="m-label">问题描述</div>
       <div class="m-input-box">
         <textarea class="m-input" type="text" placeholder="说说您遇到的问题，我们会尽快为您解决；工作时间 9:00-22:30" maxlength="16" v-model="question">
         </textarea>
       </div>
       <div class="red_btn" @click="sendquestion">提交</div>
  </div>
</template>

<script>
export default {
  name: 'serve',
  components: {
    
  },
  data(){
    return{
      istrue:true,
      fenlei:'',
      feileiid:'',          
      question:'',
      modalShow:true
    }
  },
  methods:{
    showAliasPicker() {
      if (!this.aliasPicker) {
        this.$axios.post("/index/apihq/kfwd",{})
        .then(res => {
          if(res.data.list.length > 0){
            // console.log(2)
            this.aliasPicker = this.$createPicker({
              title: '工单类型',
              data: [res.data.list],
              alias: {
                value: 'id',
                text: 'name'
              },
              onSelect: this.selectHandle,
              onCancel: this.cancelHandle
            })
            this.aliasPicker.show();
          }else{
            // console.log(1)
            alert('请求失败');
          }
        })
        
      // alert('1111');
      }else{
        this.aliasPicker.show();
      }
      
    },
    // 确定
    selectHandle(selectedVal, selectedIndex, selectedText) {
      
      this.fenlei = selectedText;

      this.feileiid = selectedVal[0];


    },
    // 取消
    cancelHandle() {
      
    },
    sendquestion() { 

      // console.log(this.fenlei)
      // console.log(this.feileiid)
      // console.log(this.question)
      this.toast1 = this.$createToast({
        txt: '请选择工单类型',
        type: 'txt'
      });
      this.toast2 = this.$createToast({
        txt: '请输入问题描述',
        type: 'txt'
      })
      if(!this.feileiid){
        
        return this.toast1.show();
      }

      
      if(!this.question){
        
        return this.toast2.show();
      } 

      this.$axios.post("/index/apihq/tjgd",
      {id:this.feileiid,content:this.question})
      .then(res => {
        if(res.data.code==0){
          alert(res.data.message);
          setTimeout(() => {
                this.$router.push('/index');
          }, 1000); 
        }else{
          alert(res.data.message);
        }
      })
      .catch(function (error) {
        console.log(error);
      }); 

    }
  },
  mounted: function(){
    
  }
}
</script>
<style scoped lang="less">
.f-flex{
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.serve{
  padding: 0 .4rem;
  .red_btn{
    margin-top: 4rem;
  }
  .header-warpper {
    padding-left: 0;
    .f-flex();
    height: 1.333333rem;
    position: relative;
    color: #000;
      img{
        width:.213333rem;
        height: .373333rem;
      }
      span{
        font-size: .48rem;
        padding-left: .2rem;
      }
      a{
        color: #aab2ca;
        position: absolute;
        right: 0;
        line-height: 1.333333rem;
        font-size: .4rem;
      }
  }
  .save-line-box {
    text-align: left;
    padding: .373333rem 0 1.12rem;
    color: #4562cd;
    .icon-check {
        margin-right: 5px;
    }
  }
  .m-input-box{
    img{
          width: 0.25rem;
          height: 0.35rem;
          margin-top: .58rem;
    }
  }
  .other-link {
      text-align: center;
      font-size: .426667rem;
      a{
        color: #4562cd;
      }
      .fixed-bottom{
         padding-top: 1.706667rem;
      }
      .f_bold{
        color: #aab2ca;
        font-weight: bold; 
      }  
      p{
        padding-top: .6rem;
      }     
  }
  .save-line-box{
        .f-flex();
        img{
          width: .453333rem;
        }
      }
}

</style>
